<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="b1">按钮1</button>
    <button id="b2">按钮2</button>
    <button id="b3">按钮3</button>
  </body>
</html>

<script>
  var b1 = document.getElementById("b1");
  var b2 = document.getElementById("b2");
  var b3 = document.getElementById("b3");
  console.log(b1, b2, b3);
  b1.onclick = function () {
    b1.style.backgroundColor = "orange";
    b2.style.backgroundColor = ""; //排他性
    b3.style.backgroundColor = "";
  };
  b2.onclick = function () {
    b2.style.backgroundColor = "green";
    b1.style.backgroundColor = "";
    b3.style.backgroundColor = "";
  };
  b3.onclick = function () {
    b3.style.backgroundColor = "yellow";
    b2.style.backgroundColor = "";
    b1.style.backgroundColor = "";
  };
</script>
